<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>企业信用</title>
    <link rel="stylesheet" href="../src/css/modal.css">
    <link rel="stylesheet" href="../src/css/index.css">
    <link rel="stylesheet" href="../src/css/loading.css">
    <script>
        (function setPageScale(window, document) {
            function setBodyScale() {
                var zoom = (window.innerHeight / 1080).toFixed(3)
                if (document.body) {
                    document.body.style.transform = 'translate(-50%, -50%) scale(' + zoom + ')';
                } else {
                    document.addEventListener('DOMContentLoaded', setBodyScale)
                }
            }
            setBodyScale();
            // reset scale unit on page resize窗口改变时候重新设置缩放
            window.addEventListener('resize', setBodyScale)
            window.addEventListener('pageshow', function (e) {
                if (e.persisted) {
                    setBodyScale()
                }
            })
        }(window, document))
    </script>
    <!--[if lt IE 9]> 
         <script src="../src/js/html5shiv.min.js"></script>
    <![endif]-->
</head>

<body>
    <div class="wrapper">

        <div class="global-content">
            <header class="header"> </header>
            <section class="main clearfix">
                <nav class="navs">
                    <div class="nav-item">
                        <a href="./cyzl.html" class="cyzl">
                            <span class="badge">2</span>
                            产业总览
                        </a>
                    </div>
                    <div class="nav-item">
                        <a href="javascript:;" class="tsgz on">
                            <span class="badge">2</span>
                            态势感知
                        </a>
                    </div>
                    <div class="nav-item">
                        <a href="./yjcz.html" class="yjcz">
                            <span class="badge">2</span>
                            预警处置
                        </a>
                    </div>

                </nav>
                <div class="content-box">
                    <a class="back-icon" href="javascript:window.history.go(-1);">
                        <img src="../src/img/back.png" alt="">
                    </a>
                    <div class="qyxy-wrapper">
                        <div class="qyxy-left">
                            <div class="qyxy-left-item">
                                <div class="qyxy-left-item-tit">企业信用研判</div>
                                <div class="monitoring">
                                    <div>监测值/极点值</div>
                                    <div>6/20</div>
                                </div>
                                <div class="a-table-list">
                                    <table>
                                        <thead>
                                            <tr>
                                                <td>指标</td>
                                                <td>监测值/基准值</td>
                                                <td>结论</td>
                                                <td>分值</td>
                                            </tr>

                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>是否超过平均信用值</td>
                                                <td>固定值</td>
                                                <td>否</td>
                                                <td>22</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="qyxy-left-item" style="display: flex;   flex-flow: column;">
                                <div class="qyxy-left-item-tit">一年内研判指标变化情况</div>
                                <div class="echarts-box" style="flex: 1;">
                                    <div id="main-bar" style="width: 100%;height:100%;"></div>
                                </div>
                            </div>

                        </div>
                        <div class="qyxy-right">
                            <div class="special-tit">
                                <span>失信黑名单</span>
                            </div>
                            <div class="a-table-list" style="max-height: 376px;overflow: auto;">
                                <table>
                                    <thead>
                                        <tr>
                                            <td>企业名称</td>
                                            <td>社会信用统一代码</td>
                                            <td>黑名单名称</td>
                                            <td>严重违法失信企业名单原因</td>
                                            <td>严重违法失信企业名单原因</td>
                                            <td>列入黑名单日期</td>
                                            <td>移出严重违法失信企业名单原因</td>
                                            <td>移出严重单日期</td>
                                            <td>作出决定机关（移出）</td>
                                        </tr>

                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="eli">是否超过平均信用值</td>
                                            <td>固定值</td>
                                            <td>22</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>22</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>22</td>
                                        </tr>
                                        <tr>
                                            <td class="eli">是否超过平均信用值</td>
                                            <td>固定值</td>
                                            <td>22</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>22</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>22</td>
                                        </tr>
                                        <tr>
                                            <td class="eli">是否超过平均信用值</td>
                                            <td>固定值</td>
                                            <td>22</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>22</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>22</td>
                                        </tr>
                                        <tr>
                                            <td class="eli">是否超过平均信用值</td>
                                            <td>固定值</td>
                                            <td>22</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>22</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>22</td>
                                        </tr>
                                        <tr>
                                            <td class="eli">是否超过平均信用值</td>
                                            <td>固定值</td>
                                            <td>22</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>22</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>22</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="special-tit">
                                <span>经营异常名录</span>
                            </div>
                            <div class="a-table-list" style="max-height: 376px;overflow: auto;">
                                <table>
                                    <thead>
                                        <tr>
                                            <td>企业名称</td>
                                            <td>社会信用统一代码</td>
                                            <td>经营异常目录</td>
                                            <td>列入经营异常名录原因</td>
                                            <td>列入经营异常名录日期</td>
                                            <td>作出决定机关（列入异常名录）</td>
                                            <td>移出经营异常名录原因</td>
                                            <td>移出日期</td>
                                            <td>作出决定机关（移出异常名录）</td>
                                        </tr>

                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="eli">是否超过平均信用值</td>
                                            <td>固定值</td>
                                            <td>22</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>22</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>22</td>
                                        </tr>
                                        <tr>
                                            <td class="eli">是否超过平均信用值</td>
                                            <td>固定值</td>
                                            <td>22</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>22</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>22</td>
                                        </tr>
                                        <tr>
                                            <td class="eli">是否超过平均信用值</td>
                                            <td>固定值</td>
                                            <td>22</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>22</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>22</td>
                                        </tr>
                                        <tr>
                                            <td class="eli">是否超过平均信用值</td>
                                            <td>固定值</td>
                                            <td>22</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>22</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>22</td>
                                        </tr>
                                        <tr>
                                            <td class="eli">是否超过平均信用值</td>
                                            <td>固定值</td>
                                            <td>22</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>22</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>22</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>
                </div>
            </section>
        </div>
    </div>
    <script src="../src/js/jquery.3.3.1.js"></script>
    <script src="../src/js/modal.min.js"></script>
    <script src="../src/js/echarts.js"></script>
    <script src="../src/js/loading.js"></script>
    <script>
        $(function () {
            // 加载显示测试  不需要可删除
            function loading1() {
                $('body').loading({ //加载区域元素id或则类名元素名 可以上任何元素类名id
                    loadingWidth: 240,
                    title: '请稍等!',
                    name: 'test', //
                    discription: '正在努力加载中...',
                    direction: 'column',
                    type: 'origin',
                    // originBg:'#71EA71',
                    originDivWidth: 40,
                    originDivHeight: 40,
                    originWidth: 6,
                    originHeight: 6,
                    smallLoading: false,
                    // loadingMaskBg: 'rgba(0,0,0,0.2)',
                    titleColor: '#52fffd',
                    // loadingBg: '#312923',
                    loadingMaskBg: 'rgba(22,22,22,0.3)'
                });
                setTimeout(function () {
                    removeLoading('test');
                    // 关闭加载
                }, 500);
            }
            loading1()
            chartBar1({
                id: 'main-bar',
                color: ['#FA6400'],
                type: 'line',
                lableList: ['1月', '1月', '1月', '1月', '1月', '1月', '1月', '1月', '1月', '1月', '1月'],
                // legendData: ['预警数量'],
                dataList: [
                    [1, 20, 160, 1, 20, 160, 1, 20, 160, 1, 20]
                ]
            })


        })

        function chartBar1(cfg) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(cfg.id));
            // 指定图表的配置项和数据
            var option = {
                color: cfg.color,
                grid: {
                    left: 80,
                    top: 50,
                    bottom: 76,
                    right: 40
                },
                dataZoom: [{
                        show: true,
                        realtime: true,
                        start: 0,
                        end: 25,
                        fillerColor: 'rgba(0, 57, 206, .2)',
                        borderColor: '#013CD9',
                        handleStyle: {
                            color: '#013CD9'
                        },
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    {
                        type: 'inside',
                        realtime: true,
                        start: 0,
                        end: 25,


                    }
                ],
                title: {
                    text: '得分',
                    textStyle: {
                        color: '#fff',
                        fontSize: 16
                    },
                    left: 28,
                    top: 10
                },
                legend: {
                    data: cfg.legendData || '',
                    top: 0,
                    x: 'center',
                    left: 100,
                    textStyle: {
                        fontSize: 16,
                        color: '#fff'
                    }
                },

                xAxis: {
                    type: 'category',
                    data: cfg.lableList,
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        },
                        interval: 0, //保证所有横向坐标数据全展示不隐藏
                        margin: 10 //刻度与坐标轴距离
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {

                        show: true, //不显示y轴
                        symbolOffset: [0, 14],
                        lineStyle: {
                            color: '#013CD9'
                        }
                    },
                    splitLine: {
                        show: false, //纵向网格线
                        lineStyle: {
                            color: ['#013CD9']
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        },
                        // interval: 0,
                        margin: 20 //刻度与坐标轴距离
                    },
                    axisTick: {
                        show: false //不显示刻度
                    },
                    axisLine: {
                        show: true, //不显示y轴

                        symbolOffset: [0, 14],
                        lineStyle: {
                            color: '#013CD9'
                        }
                    },
                    splitLine: {
                        show: false, //横向网格线
                        lineStyle: {
                            color: ['#334c69']
                        }
                    },
                    splitArea: {
                        show: true, //横向网格区域
                        areaStyle: {
                            color: ['rgba(0, 70, 255, 0.1)', 'rgba(5,39,75,0)']
                        }
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 横坐标指示器
                        type: 'line',
                        lineStyle: {
                            color: 'rgba(0,0,0,0)'
                        }
                    },
                    // alwaysShowContent: true, //悬浮后一直显示
                    // 自定义悬浮提示框内容（数据处理后加单位）
                    backgroundColor: 'rgba(0,0,0,0)',
                    // formatter(params) { // params的个数等于折线的条数（对多条折线数据进行加单位，就需要遍历）
                    //     var relVal =
                    //         '<div class="bg_2_tip" style="text-align:left;padding:20px 30px;font-size:14px "><span style="color:#fff;font-size:20px;">' +
                    //         params[0].name + '</span>' + (params[0] ? '<br><span class="color-blue-2">' + params[0]
                    //             .seriesName + '<span class="color-yellow-2 f20 pl10">' + params[0].value +
                    //             '</span>亿元</span>' : '') + '' + (params[1] ? '<br><span class="color-blue-2">' +
                    //             params[1].seriesName + '<span class="color-yellow-2 f20 pl10">' + params[1].value +
                    //             '</span>亿元</span>' : '') + '</div>'
                    //     return relVal
                    // }
                },
                series: cfg.dataList.map(function (item, index) {
                    var a = {
                        name: cfg.legendData ? cfg.legendData[index] : '',
                        type: cfg.type,
                        data: cfg.dataList[index],
                        // symbol: 'circle', //

                    }
                    return a

                })

            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

        }
    </script>

</body>

</html>